<template>
  <FormItem :label="`${itemData.label}：`"
            :prop="propName">
    <template v-if="itemData.type === 'inputRange'">
      <Row>
        <Col span="10">
        <FormItem :label-for="itemData.valueArr[0].name">
          <div class="qw-form-txt"
               v-if="itemData.readonly">{{ formData[itemData.valueArr[0].name] }}
          </div>
          <Input v-else
                 v-model="formData[itemData.valueArr[0].name]"
                 :type="itemData.inputType"
                 :maxlength="itemData.maxLen?itemData.maxLen:50"
                 :show-word-limit="itemData.showWordLimit?itemData.showWordLimit:true"
                 :placeholder="itemData.valueArr[0].placeholder"
                 :element-id="itemData.valueArr[0].name"
                 @on-change="handleInputChange" >
          <span v-if="itemData.valueArr[0].prepend && itemData.valueArr[0].prepend !== ''"
                slot="prepend">{{itemData.valueArr[0].prepend}}</span>
          <span v-if="itemData.valueArr[0].append && itemData.valueArr[0].append !== ''"
                slot="append">{{itemData.valueArr[0].append}}</span>
          </Input>
        </FormItem>
        </Col>
        <Col span="4"
             class="qw-text-c">-</Col>
        <Col span="10">
        <FormItem :prop="itemData.valueArr[1].name"
                  :label-for="itemData.valueArr[1].name">
          <div class="qw-form-txt"
               v-if="itemData.readonly">{{ formData[itemData.valueArr[1].name] }}
          </div>
          <Input v-else
                 v-model="formData[itemData.valueArr[1].name]"
                 :type="itemData.inputType"
                 :maxlength="itemData.maxLen?itemData.maxLen:50"
                 :show-word-limit="itemData.showWordLimit?itemData.showWordLimit:true"
                 :placeholder="itemData.valueArr[1].placeholder"
                 :element-id="itemData.valueArr[1].name"
                 @on-change="handleInputChange">
          <span v-if="itemData.valueArr[1].prepend && itemData.valueArr[1].prepend !== ''"
                slot="prepend">{{itemData.valueArr[1].prepend}}</span>
          <span v-if="itemData.valueArr[1].append && itemData.valueArr[1].append !== ''"
                slot="append">{{itemData.valueArr[1].append}}</span>
          </Input>
        </FormItem>
        </Col>
      </Row>
    </template>
    <template v-else-if="itemData.type === 'input'">
      <FormItem :label-for="itemData.name">
        <div class="qw-form-txt"
             v-if="itemData.readonly">{{ formData[itemData.name] }}</div>
        <Input v-else
               v-model="formData[itemData.name]"
               :type="itemData.inputType?itemData.inputType :'text'"
                 :maxlength="itemData.maxLen?itemData.maxLen:50"
                 :show-word-limit="itemData.showWordLimit?itemData.showWordLimit:true"
               :placeholder="itemData.placeholder"
               :disabled="itemData.disabled?itemData.disabled:false"
               @on-change="handleInputChange" @on-blur="handleInputBlur" />
               <p style="color:red"  v-if='isUse'>分类名称已存在，请重新输入！</p>
      </FormItem>
    </template>
    <template v-else-if="itemData.type === 'textarea'">
      <FormItem :label-for="itemData.name">
        <div class="qw-form-txt"
             v-if="itemData.readonly">{{ formData[itemData.name] }}</div>
        <Input v-else
               v-model="formData[itemData.name]"
               :type="itemData.inputType"
                 :maxlength="itemData.maxLen?itemData.maxLen:100"
                 :show-word-limit="itemData.showWordLimit?itemData.showWordLimit:true"
               :placeholder="itemData.placeholder"
               @on-change="handleInputChange"/>
      </FormItem>
    </template>
  </FormItem>
</template>
<script>
    import { ApiRequest } from '@api/basePage';
    export default {
        props: {
            itemData: {
                type: Object
            },
            formData: {
                type: Object
            }
        },
        data () {
            return {
                propName: '', // 校验规则名称
                dataList: [],
                isUse: false// 是否使用
            };
        },
        created () {
            this.uuid = this.$route.query.uuid;
            if (this.itemData.type === 'inputRange') {
                this.propName = this.itemData.valueArr[0].name
            } else {
                this.propName = this.itemData.name
            }
        },
        methods: {
            handleInputBlur (event) {
                let data = {
                    templateName: this.formData.name,
                    uuid: this.uuid ? this.uuid : "''"
                }

                // 开始请求会员信息
                ApiRequest('/sysback/template/producttemplate/checkName', 'post', data, true).then(res => {
                    if (res.retStatus === '1') {
                        if (res.retData === 'true') {
                            // this.$Message.success('成功!');
                            this.isUse = false
                        } else if (res.retData === 'false') {
                            // this.$Message.error();
                            this.isUse = true
                            this.formData.name = ''
                        } else {

                        }
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            handleInputChange (event) {
                this.$emit('handleChangeFormData', this.formData);
            }
        }
    }
</script>
